<template>
  <el-container>
    <el-main>
      <div class="tabs-style">
      <el-tabs>
        <el-tab-pane label="所有文章">
          <div class="article-preview">
            <div>
              <div class="info">
                <div><el-avatar :src="avatar" /></div>
                <div>
                  <a href="" class="author">Eric Simons</a>
                  <span class="date">January 20th</span>
                </div>
              </div>
              <el-button round size="small" class="pull-xs-right">
                <i class="el-icon-star-on"></i> 29
              </el-button>
            </div>
            <a href="/article/可扩展的 Web 应用程序" class="preview-link">
              <h1>如何构建可扩展的 Web 应用程序</h1>
              <p>
                开发技术在过去几年里以前所未有的速度发展。开发技术在过去几年里以前所未有的速度发展。
                开发技术在过去几年里以前所未有的速度发展。
              </p>
              <p>查看更多...</p>
            </a>
          </div>
          <hr color="EBEDF0" style="margin-left: 10rem" />
          <div class="article-preview">
            <div>
              <div class="info">
                <div><el-avatar :src="avatar" /></div>
                <div>
                  <a href="" class="author">Eric Simons</a>
                  <span class="date">January 20th</span>
                </div>
              </div>
              <el-button round size="small" class="pull-xs-right">
                <i class="el-icon-star-on"></i> 29
              </el-button>
            </div>
            <a href="/article/可扩展的 Web 应用程序" class="preview-link">
              <h1>如何构建可扩展的 Web 应用程序</h1>
              <p>
                开发技术在过去几年里以前所未有的速度发展。开发技术在过去几年里以前所未有的速度发展。
                开发技术在过去几年里以前所未有的速度发展。
              </p>
              <p>查看更多...</p>
            </a>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的文章"> </el-tab-pane>
      </el-tabs>
      </div>
    </el-main>
    <el-aside class="sidebar">
      <p>热门标签</p>
      <el-tag
        v-for="(tag, index) in tags"
        :key="index"
        effect="dark"
        size="medium"
      >
        {{ tag }}
      </el-tag>
    </el-aside>
  </el-container>
</template>

<script setup>
import { ref } from "vue";

const avatar = ref("https://api.realworld.io/images/demo-avatar.png");
const tags = ref([
  "软件编程",
  "javascript",
  "全栈开发",
  "Vue.js",
  "XD",
  "PhotoShop",
  "node",
  "Springboot",
]);
</script>

<style scoped>
/* scoped限制css样式仅限于本组件,以免造成冲突 */

/* 为文章预览设置底部边框 */
.article-preview {
  margin-top: 2rem;
  margin-bottom: 3rem;
  padding-bottom: 0.5rem; /* 添加底部内边距以与边框分离 */
}

.tabs-style{
  margin-top: 2rem;
  margin-bottom: 3rem;
  margin-left: 10rem; /* 添加左边距 */
}

/* 为文章描述和其他文字设置灰色 */
.article-preview p,
p {
  color: #909399; /* 文字颜色设置为灰色 */
}

/* 移除所有超链接的下划线 */
a {
  text-decoration: none;
}

/* 设置作者样式 */
.author {
  font-size: 1.2em; /* 增大字体大小 */
  color: #67c23a; /* 设置作者名字的颜色 */
  text-decoration: none; /* 移除下划线 */
}

/* 设置日期样式 */
.date {
  margin-top: 0.5rem;
  display: block;
  color: #909399;
}

/* 减少行距 */
.author,
.date {
  margin: 0; /* 移除默认的外边距 */
  line-height: 1; /* 减小行高 */
}

/* 为头像和作者信息设置并排布局 */
.info {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

/* 为头像设置固定宽度和高度 */
.el-avatar {
  width: 32px;
  height: 32px;
  margin-right: 0.5rem; /* 添加右边距以与作者名字分开 */
}

/* 为文章右侧点赞按钮定义右对齐 */
.pull-xs-right {
  float: right !important;
}

/* 设置文章标题超链样式 */
.preview-link h1 {
  color: black;
}

/* 设置右侧标签栏样式 */
.sidebar {
  flex: 0 0 25%; /* 固定宽度比例 */
  padding-left: 1rem;
}

/* 为每个标签设置背景颜色 */
.sidebar .el-tag {
  background-color: #909399;
  color: white; /* 文字颜色设置为白色以提高可读性 */
  margin-top: 0.25rem;
  margin-right: 0.5rem;
  border: none;
}

/* 设置分页栏样式 */
.pagination {
  margin-left: 10rem; /* 添加左边距 */
}
</style>
